<template>
    <view class="page">
        <view class="page-flex-top" :class="{'page-flex-top-spec':header!=0}">
<!--            <view class="nav-header">-->
<!--                <view :class="{'nav-item':true,'active':header==0}" @click="headerChange(0)">-->
<!--                    <text class="nav-item-text">服务对接</text>-->
<!--                    <view class="nav-item-line"></view>-->
<!--                </view>-->
<!--                <view :class="{'nav-item':true,'active':header==1}" @click="headerChange(1)">-->
<!--                    <text class="nav-item-text">专家对接</text>-->
<!--                    <view class="nav-item-line"></view>-->
<!--                </view>-->
<!--                <view :class="{'nav-item':true,'active':header==2}" @click="headerChange(2)">-->
<!--                    <text class="nav-item-text">服务商</text>-->
<!--                    <view class="nav-item-line"></view>-->
<!--                </view>-->
<!--                <view class="search-btn" @click="skipsearch">-->
<!--                    <img :src="File_Url+'search-icon.png'" />-->
<!--                </view>-->
<!--            </view>-->
            <scroll-view :scroll-x="true" style="" :scroll-into-view="'nav'+((Index-2) > 0 ? (Index-2) : 0)" :scroll-with-animation="true" class="nav" v-if="header==0">
                <view :id="'nav0'" :class="{'nav-item':true,'active':Index==0}" @click="navChange(0)">
                    <text class="nav-item-text">全部</text>
                    <view class="nav-item-line"></view>
                </view>
                <view v-for="(item, index) in navList" :key="index" :id="'nav'+(index+1)" :class="{'nav-item':true,'active':Index==(index+1)}" @click="navChange(index+1)">
                    <text class="nav-item-text">{{item.name}}</text>
                    <view class="nav-item-line"></view>
                </view>
            </scroll-view>
        </view>
        <!--服务对接-->
        <view class="screen-nav" v-if="header==0">
            <!--<view class="screen-nav-item">
                <picker class="nav-item-picker" mode="selector" :value="industryItem" :range="industry" @change="industryChange">
                    <text>{{industry[industryItem].length>4?industry[industryItem][0]+industry[industryItem][1]+industry[industryItem][2]+industry[industryItem][3]+'...':industry[industryItem]}}</text>
                    <img :src="File_Url+'bottom-grey.png'" />
                </picker>
            </view>-->
<!--            <view class="screen-nav-item">-->
<!--                <picker class="nav-item-picker" mode="region" :value="region" :custom-item="customItem" @change="regionChange">-->
<!--                    <text>{{(region[2]==''?(region[1]==''?(region[0]==''?'地区':region[0]):region[1]):region[2])}}</text>-->
<!--                    <img :src="File_Url+'bottom-grey.png'" />-->
<!--                </picker>-->
<!--            </view>-->
<!--            <view class="screen-nav-item">-->
<!--                <picker class="nav-item-picker" mode="selector" :value="hotItem" :range="hot" @change="hotChange">-->
<!--                    <text>{{hotItem==''?'全部':hot[hotItem]}}</text>-->
<!--                    <img :src="File_Url+'bottom-grey.png'" />-->
<!--                </picker>-->
<!--            </view>-->
        </view>
        <swiper :autoplay="false"
                :current="Index"
                @change="swiperChange"
                :indicator-dots="false"
                class="swiper-sty"
                v-if="header==0">
            <swiper-item style="overflow: auto">
                <needs-list  :userInfo="userInfo" :classify_id="item.id" :region="region" :Index="Index" :hotItem="hotItem" :updateFlag="updateFlag" :updateAuth="updateAuth"></needs-list>
            </swiper-item>
            <swiper-item style="overflow: auto" v-for="(item,index) in navList" :key="index">
                <needs-list :userInfo="userInfo" :classify_id="item.id" :region="region" :Index="Index" :hotItem="hotItem" :updateFlag="updateFlag" :updateAuth="updateAuth"></needs-list>
                <!--<view class="needs-list" v-if="header==0">
                    <view class="needs-item" v-for="(item, index) in needsList" :key="index" @click="skipNeedsDetail(item.id)">
                        <view class="needs-item-top">
                            <text class="item-title">{{item.title}}</text>
                            <view class="item-city">
                                <text>{{item.city}}</text>
                                <img mode="widthFix" src="../../static/img/position.png" />
                            </view>
                            &lt;!&ndash;<text :class="{'item-status':true,'blue':item.status==0,'green':item.status==1}">{{item.status==0?'筛选中':'对接成功'}}</text>&ndash;&gt;
                        </view>
                        <view class="needs-item-bottom">
                            <view class="item-btn-item item-btn-item-spec">
                                <img class="spec-img" src="../../static/img/needs-type.png" />
                                <text class="spec-text">{{item.classify_name}}</text>
                            </view>
                        </view>
                        <view v-if="item.budget" class="needs-item-bottom" style="margin-top: 15px;">
                            <text style="color: #333333;font-size: 26rpx">服务预算：{{item.budget}}</text>
                        </view>
                        <view class="needs-item-center">
                            <view class="item-content-text">{{item.content}}</view>
                            <view class="item-content-tip" v-if="item.label_arr.length>0">
                                <view v-for="(tip, ids) in item.label_arr" :key="ids">{{tip}}</view>
                            </view>
                            <view class="item-content-img" v-if="item.img_array_url.length>0">
                                <img v-for="(url, ids) in item.img_array_url" :key="ids" :src="url" mode="aspectFill">
                            </view>
                        </view>
                        <view class="needs-item-bottom">
                            <view class="item-btn-item">
                                <img :src="File_Url+'eyes-icon.png'" />
                                <text>{{item.browse_num}}</text>
                            </view>
                            <view class="item-btn-item">
                                <img :src="File_Url+'collect-active.png'" v-if="item.is_collection==1"/>
                                <img :src="File_Url+'collect.png'" v-else/>
                                <text>{{item.attention_num}}</text>
                            </view>
                            <view class="item-time">{{item.created_at.split(' ')[0]}}</view>
                        </view>
                    </view>
                    <view class="null" v-if="needsTotal == needsList.length&&header==0">
                        <text>没有更多了哦～</text>
                    </view>
                </view>-->
            </swiper-item>
        </swiper>

        <view class="page-flex-bottom" v-if="header==0" @click.stop="skipAddneeds">
            <!--<img :src="File_Url+'needs-add.png'" />-->
            <img src="../../static/img/needs-add.png" />
        </view>


        <!--专家对接-->
        <view class="experts-list" v-if="header==1">
            <view class="page-list-item" v-for="(item, index) in expertsList" :key="index" @click="skipDetail(item.id)">
                <view class="item-head">
                    <view class="item-head-left">
                        <img :src="item.photo_url" mode="aspectFill"/>
                    </view>
                    <view class="item-head-center">
                        <text class="name">{{item.realname}}</text>
                        <text class="tip">{{item.position}}</text>
                    </view>
                    <view class="item-head-right">
                        <img :src="File_Url+'allocation.png'" />
                        <text>{{item.city.substr(0,2)}}</text>
                    </view>
                </view>
                <view class="item-content">
                    <view class="item-content-top">
                        <img :src="File_Url+'speciality-icon.png'" />
                        <text>擅长领域</text>
                    </view>
                    <view class="item-content-center">
                        {{item.strengths}}
                    </view>
                    <view class="item-content-bottom">
                        <text v-for="(range, ids) in item.expert_label" :key="ids">{{range}}</text>
                    </view>
                </view>
            </view >
        </view>

        <!--服务商-->
        <view class="company-list" v-if="header==2">
            <view class="page-member-item" v-for="(item,index) in companyList" :key="index" @click="skipMemberDetail(item.id)">
                <view class="item-top">
                    <view class="item-left">
                        <img mode="aspectFit" :src="item.logo_url" />
                        <img class="icon" :src="File_Url+'vip-icon.png'" />
                    </view>
                    <view class="item-right">
                        <view class="item-name">{{item.name}}</view>
                        <!--                        <view class="item-desc" v-if="item.classify_Info==null&&item.unit_grade_Info==null" v-html="item.introduction"></view>-->
                        <view class="item-tip" v-if="item.classify_Info!=null||item.unit_grade_Info!=null">
                            <view class="sort" v-if="item.classify_Info!=null"><view class="icon"></view>{{item.classify_Info.name}}</view>
                            <view class="level" v-if="item.unit_grade_Info!=null">{{item.unit_grade_Info.name}}</view>
                        </view>
<!--                        <view class="item-desc" v-html="item.introduction"></view>-->
                        <view class="item-desc">{{item.introduction}}</view>
                    </view>
                </view>
                <!--                <view class="item-bottom" v-if="item.classify_Info!=null||item.unit_grade_Info!=null">-->
                <!--                    <view class="item-desc" v-html="item.introduction"></view>-->
                <!--                </view>-->
            </view>
        </view>

        <view class="null" v-if="expertsTotal == expertsList.length&&header==1">
            <text>没有更多了哦～</text>
        </view>
        <view class="null" v-if="companyTotal == companyList.length&&header==2">
            <text>没有更多了哦～</text>
        </view>
        <!--        底部弹窗-->
        <!--        <bottomPopup :PopupShow.sync="popupShow" :navList="navList"></bottomPopup>-->
    </view>
</template>

<script>
    // import loadMore from "../loadMore/loadMore";
    import bottomPopup from "@/pages/components/bottomPopup/bottomPopup.vue";
    import needsList from "../components/needsList/needsList";
    export default {
        name: "needs",
        components: {bottomPopup,needsList},
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                Index: 0,
                header: 0,
                navList:[],
                industryList: [],
                industry:['全部'],
                industryItem:0,
                region: ['','',''],
                customItem: '全部',
                hot: ['最新','热门'],
                hotItem: 1,
                popupShow: false,
                needsPage: 1,
                needsTotal: 0,
                needsList: [],
                classify_id:'',

                expertsList: [],//专家列表
                expertsPage: 1,
                expertsTotal: 0,

                companyList: [],//服务商列表
                companyPage: 1,
                companyTotal: 0,
                userInfo: '',
                updateFlag: false,//更新needsList子组件标志
                updateAuth: ""
            }
        },
        onShow(){
            this.getNeedsClassify();
            uni.showTabBar();
            this.getUserInfos();
        },
        onLoad(){
            /*this.getIndustryList();*/
        },
        //下拉刷新
        onPullDownRefresh(){
            switch (this.header) {
                case 0:
                    /*this.needsPage = 1;*/
                    /*this.getIndustryList();*/
                    this.updateFlag = !this.updateFlag;
                    break;
                case 1:
                    this.expertsPage = 1;
                    this.getExpertsList();
                    break;
                case 2:
                    this.companyPage = 1;
                    this.getMemberUnitList();
                    break;
            }

            setTimeout(function () {
                uni.stopPullDownRefresh();
            },2000)
        },
        //触底叠加
        onReachBottom(){
            switch (this.header) {
                case 0:
                    /*this.needsPage++;
                    if (this.needsTotal != this.needsList.length){
                        this.getIndustryList();
                    }*/
                    break;
                case 1:
                    if (this.expertsTotal != this.expertsList.length){
                        this.expertsPage++;
                        this.getExpertsList();
                    }
                    break;
                case 2:
                    if (this.companyTotal != this.needsList.length){
                        this.companyPage++;
                        this.getMemberUnitList();
                    }
                    break;
            }
        },
        methods:{
            //获取行业列表
            async getIndustryList(){
                const res = await this.$api.getIndustryList();
                if (res.data.level == 'success'){
                    this.industryList = res.data.data
                    for (let i = 0; i< res.data.data.length ; i++){
                        this.industry.push(res.data.data[i].name);
                    }
                    let num = this.needsPage;
                    this.needsList = [];
                    for (let i = 0; i< num; i++){
                        this.needsPage = i+1;
                        this.getDemandList();
                    }
                }
            },
            //获取需求分类
            async getNeedsClassify(){
                let params = { type:'demand' };
                const res = await this.$api.getClassify(params);
                if (res.data.level == 'success'){
                    // console.log(res)
                    this.navList = res.data.data
                }
            },
            //获取需求列表
            async getDemandList(){
                let params = {
                    page: this.needsPage,
                    limit: 4,
                    province: this.region[0],
                    city: this.region[1],
                    area: this.region[2],
                    is_recommend: this.Index+1,
                    is_hot: this.hotItem,
                    classify_id: this.classify_id,
                    user_token: uni.getStorageSync('userToken')
                }
                if (this.industryItem!=0){
                    params.industry_id = this.industryList[this.industryItem-1].id;
                }
                const res = await this.$api.getDemandList(params);
                if (res.data.level == 'success'){
                    if (this.needsPage == 1){
                        this.needsList = res.data.data;
                    }else {
                        this.needsList = this.needsList.concat(res.data.data)
                    }
                    this.needsTotal = res.data.page_info.total;
                }
            },
            //获取专家列表
            async getExpertsList(){
                let params = {
                    limit: 10,
                    page: this.expertsPage
                }
                const res = await this.$api.getExpertsList(params);
                if (res.data.level == 'success'){
                    if (this.expertsPage == 1){
                        this.expertsList = res.data.data
                    } else {
                        this.expertsList = this.expertsList.concat(res.data.data)
                    }
                    this.expertsTotal = res.data.page_info.total;
                }
            },
            //获取会员单位列表
            async getMemberUnitList(){
                let params = {
                    limit: 10,
                    page: this.companyPage,
                    classify_id: '',
                    unit_grade_id: ''
                }
                const res = await this.$api.getMemberUnitList(params);
                if (res.data.level == 'success'){
                    let str = res.data.data;
                    for(let i =0; i < str.length; i++){
                        if (str[i].introduction != null){
                            str[i].introduction = str[i].introduction.replace(/<img[^>]*>/gi, function(match, capture){
                                return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, '')
                            });
                            str[i].introduction = str[i].introduction.replace(/\<img/gi, '<img style="display:none" ');
                        }
                    }
                    if (this.companyPage == 1){
                        this.companyList = str
                    } else {
                        this.companyList = this.companyList.concat(str)
                    }
                    this.companyTotal = res.data.page_info.total;
                }
            },
            headerChange(id){
                this.header = id;
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 0
                })
                switch (id) {
                    case 0:
                        this.needsPage = 1;
                        this.getIndustryList();
                        break;
                    case 1:
                        this.expertsPage = 1;
                        this.getExpertsList();
                        break;
                    case 2:
                        this.companyPage = 1;
                        this.getMemberUnitList();
                        break;
                }
            },
            //nav切换
            navChange(id){
                this.Index = id;
                this.region = ['','',''];
                this.hotItem = 1;
                this.industryItem = 0;
                this.needsPage = 1;
                if (id != 0){
                    this.classify_id = this.navList[id-1].id
                } else {
                    this.classify_id = ''
                }
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 0
                })
                /*this.getDemandList();*/
            },
            //跳转新增需求
            skipAddneeds(){
                if (uni.getStorageSync('userToken')){
                    // if(this.userInfo.user_info.is_info_perfect != 1){
                    //     uni.showToast({
                    //         icon: 'none',
                    //         title: '请完善个人信息！',
                    //         duration: 2000
                    //     })
                    //     setTimeout(function () {
                    //         uni.navigateTo({
                    //             url: '/pages/person/editInfo/editInfo'
                    //         })
                    //     },2000)
                    // } else{
                    //     uni.navigateTo({
                    //         url: '/pages/needs/addNeeds/addNeeds'
                    //     })
                    // }
                    uni.navigateTo({
                        url: '/pages/needs/addNeeds/addNeeds'
                    })
                } else {
                    uni.showToast({
                        icon: 'none',
                        title: '请先登录！',
                        duration: 3000
                    })
                    setTimeout(function () {
                        uni.switchTab({
                            url: '/pages/person/person'
                        })
                    },3000)
                }
            },
            industryChange(e){
                console.log(e)
                this.industryItem = e.detail.value;
                this.needsPage = 1;
                /*this.getDemandList();*/
            },
            regionChange(e){
                console.log(e)
                this.region = e.detail.value;
                this.needsPage = 1;
                if (this.region[0]=='全部') {
                    this.region[0]= '';
                }
                if (this.region[1]=='全部') {
                    this.region[1]= '';
                }
                if (this.region[2]=='全部') {
                    this.region[2]= '';
                }
                /*this.getDemandList();*/
            },
            hotChange(e){
                console.log(e)
                this.hotItem = e.detail.value;
                this.needsPage = 1;
                /*this.getDemandList();*/
            },
            //跳转搜索页面
            skipsearch(){
                uni.navigateTo({
                    url:'/pages/search/search'
                })
            },
            //跳转需求详情页面
            skipNeedsDetail(id){
                uni.navigateTo({
                    url:'/pages/details/needsDetail/needsDetail?needsId='+id
                })
            },
            //跳转专家详情页面
            skipDetail(id){
                uni.navigateTo({
                    url: '/pages/expertLibrary/expertDetail/expertDetail?expertId='+id
                })
            },
            //跳转到单位详情
            skipMemberDetail(id){
                uni.navigateTo({
                    url: '/pages/memberUnit/MemberDetail/MemberDetail?memberId='+id
                })
            },
            //获取个人信息
            async getUserInfos(){
                let userToken=uni.getStorageSync('userToken');
                const res=await this.$api.getUserInfos({user_token:userToken});
                if(res.data.level=='success'){
                    this.userInfo=res.data.data
                    uni.setStorageSync('is_personal_auth',res.data.data.user_info.personal_auth_status);
                    this.updateAuth = res.data.data.user_info.personal_auth_status
                }
            },
            swiperChange(e) {
                this.navChange(e.detail.current)
            }
        },
        watch:{
            popupShow(newValue, oldValue){
                if (newValue){
                    uni.hideTabBar();
                } else {
                    uni.showTabBar();
                }
            },
            Index(newValue, oldValue){
                this.needsPage = 1;
                /*this.getDemandList();*/
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        /*padding-top: 88rpx;*/
    }
    .page-flex-top-spec{
        position: fixed;
        top: 0;
        left: 0;
    }
    .page-flex-top{
        /*position: fixed;
        top: 0;
        left: 0;*/
        /*height: 88rpx;*/
        width: 100vw;
        background: #ffffff;
        z-index: 500;
        .nav-header{
            @include flex(flex-start);
            flex-direction: row;
            margin: 0 120rpx 0 30rpx;
            width: calc(100vw - 150rpx);
            @include scrolling(scroll,hidden);
            .nav-item{
                padding: 0 26rpx;
                height: 88rpx;
                @include flex();
                flex-direction: column;
                .nav-item-text{
                    color: #333333;
                    font-size: 34rpx;
                    line-height: 48rpx;
                    height: 48rpx;
                    font-weight: ceil(500);
                }
            }
            .active{
                .nav-item-text{
                    color: #3782FF;
                    font-size: 40rpx;
                    line-height: 56rpx;
                    height: 56rpx;
                    font-weight: ceil(600);
                    margin: 12rpx;
                }
                .nav-item-line{
                    width: 40%;
                    height: 8rpx;
                    background: #3782FF;
                    border-radius: 4rpx;
                }
            }
            .search-btn{
                position: absolute;
                right: 0;
                top: 0;
                background: #FFFFFF;
                width: 60rpx;
                height: 60rpx;
                padding: 14rpx 30rpx;
            }
        }
        .nav{
            @include flex(flex-start);
            flex-direction: row;
            margin: 0 30rpx 0 30rpx;
            width: calc(100vw - 60rpx);
            @include scrolling(scroll,hidden);
            .nav-item{
                padding: 0 26rpx;
                height: 88rpx;
                @include flex();
                flex-direction: column;
                display: inline-flex;
                .nav-item-text{
                    color: #333333;
                    font-size: 34rpx;
                    line-height: 48rpx;
                    height: 48rpx;
                    font-weight: ceil(500);
                }
            }
            .active{
                .nav-item-text{
                    color: #3782FF;
                    font-size: 40rpx;
                    line-height: 56rpx;
                    height: 56rpx;
                    font-weight: ceil(600);
                    margin: 12rpx;
                }
                .nav-item-line{
                    width: 40%;
                    height: 8rpx;
                    background: #3782FF;
                    border-radius: 4rpx;
                }
            }
        }
    }
    .screen-nav{
        /*margin-top: 176rpx;*/
        padding: 0 30rpx;
        background: #F8F8F8;
        @include flex();
        flex-direction: row;
        .screen-nav-item{
            width: 48%;
            .nav-item-picker{
                padding:24rpx 0;
                @include flex();
                flex-direction: row;
                text{
                    font-size: 28rpx;
                    line-height: 40rpx;
                    height: 40rpx;
                    color: #999999;
                }
                img{
                    width: 30rpx;
                    height: 34rpx;
                    padding: 3rpx;
                    vertical-align: middle;
                }
            }

        }
    }
    .swiper-sty{
        height: calc(100vh);
    }
    .needs-list{
        min-height: calc(100vh - 300rpx);
        .needs-item{
            padding: 20rpx 30rpx;
            border-bottom: 10rpx solid #F8F8F8;
            .needs-item-top{
                /*height: 57rpx;*/
                height: 63rpx;
                @include flex(flex-start);
                flex-wrap: wrap;
                flex-direction: row;
                .item-title{
                    height: 45rpx;
                    line-height: 45rpx;
                    font-size: 32rpx;
                    font-weight: bold;
                }
                .item-city{
                    text-align: right;
                    display: flex;
                    align-items: center;
                    flex-direction: row-reverse;
                    margin-left: auto;
                    text{
                        min-width: 30px;
                        font-size: 28rpx;
                        color: #666666;
                        line-height: 14px;
                    }
                    img{
                        width: 30rpx;
                        height: 30rpx;
                    }
                }
                .item-status{
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                    width: 100%;
                    text-align: right;
                }
                .blue{
                    color: #3782FF;
                }
                .green{
                    color: #00C735;
                }
                .red{
                    color: #FF6565;
                }
            }
            .needs-item-center{
                padding: 10rpx 0rpx 16rpx 0;
                .item-content-text{
                    @include ellipsis(3);
                    font-size: 26rpx;
                    line-height: 37rpx;
                    margin-bottom: 16rpx;
                    margin-top: 10rpx;
                }
                .item-content-tip{
                    @include flex(flex-start);
                    flex-direction: row;
                    view{
                        height: 40rpx;
                        padding: 0 16rpx;
                        background: #3782FF;
                        border-radius: 8rpx;
                        font-size: 26rpx;
                        line-height: 40rpx;
                        margin-right: 10rpx;
                        color: #FFFFFF;
                    }
                }
                .item-content-img{
                    @include flexWrap(flex-start);
                    flex-direction: row;
                    padding: 20rpx 0;
                    img{
                        width: calc((100% - 36rpx)/3);
                        height: 140rpx;
                        margin: 6rpx;
                        border-radius: 4rpx;
                    }
                    img:last-child{
                        margin-right: 0;
                    }
                }
            }
            .needs-item-bottom{
                @include flex(flex-start);
                flex-direction: row;
                .item-btn-item{
                    @include flex();
                    flex-direction: row;
                    margin-right: 20rpx;
                    img{
                        width: 40rpx;
                        height: 40rpx;
                        margin-right: 10rpx;
                    }
                    text{
                        height: 40rpx;
                        line-height: 40rpx;
                        font-size: 28rpx;
                        color: #666666;
                    }
                    .spec-img{
                        width: 22rpx;
                        height: 22rpx;
                        margin-left: 4rpx;
                    }
                    .spec-text{
                        color: #333333;
                    }
                }
                .item-btn-item-spec{
                    padding: 4rpx 20rpx;
                    background-color: #f1f1f1;
                    border-radius: 20rpx;
                }
                .item-time{
                    margin-left: auto;
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                    color: #666666;
                }
            }
        }
    }
    .page-flex-bottom{
        position: fixed;
        right: 0;
        bottom: 47rpx;
        z-index: 300;
        width: 158rpx;
        height: 158rpx;
    }
    .list-bottom{
        background: #F8F8F8;
        padding: 23rpx 0;
        @include flex();
        flex-direction: column;
        text{
            height: 40rpx;
            line-height: 40rpx;
            font-size: 28rpx;
            color: #B5B5B5;
        }
    }
    .experts-list{
        padding-top: 88rpx;
        .page-list-item{
            background: #FFFFFF;
            margin-bottom: 15rpx;
            /*border-radius: 16rpx;*/
            box-shadow: 0 3rpx 10rpx 0 rgba(0, 0, 0, 0.1);
            padding: 0 30rpx;
            .item-head{
                padding: 30rpx 0;
                @include flex(flex-start);
                flex-direction: row;
                border-bottom: 1rpx solid #E5E5E5;
                .item-head-left{
                    width: 110rpx;
                    height: 110rpx;
                    border-radius: 360rpx;
                    overflow: hidden;
                }
                .item-head-center{
                    padding: 0 20rpx;
                    @include flex(flex-start,flex-start);
                    flex-direction: column;
                    .name{
                        height: 52rpx;
                        line-height: 52rpx;
                        font-size: 32rpx;
                        font-weight: bold;
                    }
                    .tip{
                        height: 35rpx;
                        line-height: 35rpx;
                        color: #666666;
                        font-size: 24rpx;
                    }
                }
                .item-head-right{
                    margin-left: auto;
                    @include flex(flex-start);
                    flex-direction: row;
                    img{
                        width: 30rpx;
                        height: 30rpx;
                        margin-right: 14rpx;
                    }
                    text{
                        color: #666666;
                        font-size: 24rpx;
                        height: 40rpx;
                        line-height: 40rpx;
                    }
                }
            }
            .item-content{
                padding: 30rpx 0 40rpx 0;
                .item-content-top{
                    @include flex(flex-start);
                    flex-direction: row;
                    padding-bottom: 15rpx;
                    img{
                        width: 36rpx;
                        height: 36rpx;
                    }
                    text{
                        height: 36rpx;
                        line-height: 36rpx;
                        color: #666666;
                        font-size: 24rpx;
                    }
                }
                .item-content-center{
                    color: #666666;
                    font-size: 28rpx;
                    line-height: 40rpx;
                    height: 80rpx;
                    @include ellipsis(2);
                }
                .item-content-bottom{
                    @include flexWrap(flex-start);
                    flex-direction: row;
                    padding-top: 30rpx;
                    text{
                        font-size: 24rpx;
                        height: 48rpx;
                        line-height: 48rpx;
                        padding: 0 16rpx;
                        border-radius: 30rpx;
                        background: #3782FF;
                        color: #FFFFFF;
                        margin-right: 10rpx;
                    }
                }
            }
        }
    }
    .company-list{
        padding-top: 88rpx;
        .page-member-item{
            border-bottom: 1rpx solid #E5E5E5;
            padding: 30rpx;
            .item-top{
                @include flex(flex-start,flex-start);
                flex-direction: row;
                .item-left{
                    width: 130rpx;
                    height: 130rpx;
                    position: relative;
                    img{
                        width: 100%;
                        height: 100%;
                        /*border-radius: 360rpx;*/
                    }
                    .icon{
                        position: absolute;
                        right: 0rpx;
                        width: 40rpx;
                        height: 40rpx;
                        bottom: 0;
                    }
                }
                .item-right{
                    margin-left: auto;
                    width: calc(100% - 150rpx);
                    /*height: 200rpx;*/
                    @include flex(center,flex-start);
                    flex-direction: column;
                    .item-name{
                        height: 60rpx;
                        line-height: 60rpx;
                        font-weight: bold;
                        font-size: 28rpx;
                        @include ellipsis(1);
                        margin-bottom: 10rpx;
                    }
                    .item-desc{
                        max-height: 74rpx;
                        /*height: 70rpx;*/
                        line-height: 37rpx;
                        /*padding-top: 30rpx;*/
                        font-size: 24rpx;
                        width: 100%;
                        color: #666666;
                        @include ellipsis(2);
                    }
                    .item-tip{
                        height: 70rpx;
                        line-height: 70rpx;
                        font-size: 24rpx;
                        width: 100%;
                        margin-top: auto;
                        @include flex(flex-start,flex-end);
                        flex-direction: row;
                        .sort{
                            @include flex(flex-start);
                            flex-direction: row;
                            color: #999999;
                            .icon{
                                width: 20rpx;
                                height: 20rpx;
                                background: #3782FF;
                                border-radius: 360rpx;
                                margin-right: 20rpx;
                            }
                        }
                        .level{
                            margin-left: auto;
                            color: #3782FF;
                        }
                    }
                }
            }
            .item-bottom{
                padding-top: 30rpx;
                .item-desc{
                    max-height: 74rpx;
                    line-height: 37rpx;
                    font-size: 24rpx;
                    color: #666666;
                    @include ellipsis(2);
                }
            }
        }
    }
</style>
